<template>
  <client-only>
    <el-dialog
        center
        draggable
        destroy-on-close
        lock-scroll
        append-to-body
        v-model="dialogVisible"
        :title="props.title"
        :width="props.width"
        @before-close="dialogBeforeClose"
        @closed="dialogClose"
        @opened="opened"
    >
      <slot/>
      <template #footer>
        <span>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">{{ props.submitText }}</el-button>
        </span>
      </template>
    </el-dialog>
  </client-only>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: 'title'
  },
  visible: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '30%'
  },
  submitText: {
    type: String,
    default: '提交'
  }
});
const emit = defineEmits([
  "close",
  "beforeClose",
  "confirm",
  "cancel"
]);
const dialogVisible = ref(props.visible);
const dialogBeforeClose = (done: () => void) => {
  emit("beforeClose");
  done();
};
const dialogClose = () => {
  emit("close");
  const HtmlElement = document.querySelector("html");
  if (HtmlElement) {
    HtmlElement.style.removeProperty("overflow");
    HtmlElement.style.removeProperty("width");
  }
};
const cancel = () => {
  emit("cancel");
  dialogVisible.value = false;
};
const confirm = () => {
  emit("confirm");
  dialogVisible.value = false;
};
const opened = () => {
  const HtmlElement = document.querySelector("html");
  if (HtmlElement) {
    HtmlElement.style.overflow = "hidden";
    HtmlElement.style.width = "calc(100% - 7px)";
  }
};
defineExpose({
  dialogVisible
});
</script>